<template>
	<nt-container>
		
		<view class="check-tabs" v-if="orderId">
			<view class="check-tabs__item" @tap="back()">验券</view>
			<view class="check-tabs__item active">验券历史</view>
		</view>
		<view class="history">
			<template v-if="hisotryList.length > 0">
				<u-list
					@scrolltolower="getHistory"
					enableBackToTop
				>
					<view class="history-item" v-for="it in hisotryList" :key="it.id">
						<view class="history-item__view">
							<view class="history-item__label">
								<text class="title">门店：</text>
								<text class="content">{{ it.openshop.shopname }}({{ it.openshop.branchname }})</text>
							</view>
						</view>
						<view class="history-item__view flex">
							<view class="history-item__label">
								<text class="title">券码：</text>
								<text class="content red">{{ it.receipt_code }}</text>
							</view>
							<view class="history-item__label">
								<text class="title">券金额：</text>
								<text class="content red">{{ it.payment_price }}</text>
							</view>
						</view>
						<view class="history-item__view flex">
							<view class="history-item__label">
								<text class="title">实收：</text>
								<text class="content red">{{ it.shishou }}</text>
							</view>
							<view class="history-item__label">
								<text class="title">优惠：</text>
								<text class="content red">{{ it.youhui }}</text>
							</view>
						</view>
						<view class="history-item__view flex">
							<view class="history-item__label">
								<text class="title">验券时间：</text>
								<text class="content red">{{ it.createtime }}</text>
							</view>
							<view class="history-item__label">
								<text class="title">验券用户：</text>
								<text class="content red">{{ it.app_shop_accountname }}</text>
							</view>
						</view>
						<view class="history-item__view">
							<view class="history-item__label">
								<text class="title">订单：</text>
								<text class="content">[{{it.orderreal.customername}} {{it.orderreal.customerphone}}]{{it.orderreal.address}}</text>
							</view>
						</view>
						<view class="history-footer">
							<view class="history-footer__btn" @tap="nav(`/subpackage/order/pages/check-ticket/update?id=${it.order_id}&branchname=${it.openshop.branchname}&shopname=${it.openshop.shopname}&code=${it.receipt_code}`)">修改</view>
							<view class="history-footer__btn" @tap="nav(`/subpackage/order/pages/_id?id=${it.orderreal.id}`)">查看订单</view>
						</view>
					</view>
				</u-list>
			</template>
			<u-empty icon="http://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
		</view>
	</nt-container>
</template>

<script>
import { getMeituanScopereceiptLog } from "@/api"
export default {
	data(){
		return {
			hisotryList: [],
			page: 1,
			limit: 10,
			isNext: true,
			loading: false,
			orderId: ''
		}
	},
	onLoad(options){
		this.orderId = options.id || ''
	},
	onShow(){
		this.init()
	},
	methods: {
		init(){
			this.hisotryList = []
			this.page = 1
			this.isNext = true
			this.getHistory()
		},
		getHistory(){
			if(this.loading) return;
			this.loading = true
			getMeituanScopereceiptLog({
				page: this.page,
				limit: this.limit,
			}).then(res => {
				const { data, code } = res;
				if(code === 1){
					this.hisotryList = this.hisotryList.concat(data.data)
					this.page++
					this.loading = false
					if(this.hisotryList.length >= data.total){
						this.isNext = false
					}
				}
			}).catch(err => {
				this.loading = false
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	
.check-tabs{
	display:flex;
	align-items: center;
	justify-content: space-between;
	height: 90rpx;
	margin: 20rpx;
	background:#fff;
	&__item{
		flex: 1;
		text-align: center;
		color:#666;
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		&.active{
			background: var(--theme-color);
			color:#fff;
		}
		&::before{
			content: '';
			display: block;
			position: absolute;
			top: 0;
			bottom:0;
			left: 0;
			width:1rpx;
			background:#f5f5f5
		}
	}
}
.history{
	padding: 20rpx;
	box-sizing: border-box;
	&-item{
		padding: 20rpx;
		background:#fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		&__view{
			font-size: 26rpx;
			margin-bottom: 20rpx;
			&.flex{
				display:flex;
				justify-content: space-between;
			}
			.title{
				color:#666;
				font-weight: bold;
			}
			.content{
				color:#333;
				&.red{
					color:#f00;
				}
			}
		}
	}
	&-footer{
		display:flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		border-top: 1rpx solid #f5f5f5;
		padding-top: 20rpx;
		&__btn{
			font-size: 26rpx;
			color:var(--theme-color);
			height: 60rpx;
			line-height: 58rpx;
			border-radius: 6rpx;
			border: 1rpx solid var(--theme-color);
			text-align: center;
			padding: 0 30rpx;
		}
	}
}
</style>